import { SearchOutlined } from '@ant-design/icons';
import { AutoComplete, Input } from 'antd';
import useMergeValue from 'use-merge-value';
import { AutoCompleteProps } from 'antd/es/auto-complete';
import React, { useRef, useState } from 'react';
import { getSpecialApiInfo } from '@/services/menu';
import classNames from 'classnames';
import styles from './index.less';
import { history } from 'umi';

export interface HeaderSearchProps {
  onSearch?: (value?: string) => void;
  onChange?: (value?: string) => void;
  onVisibleChange?: (b: boolean) => void;
  className?: string;
  placeholder?: string;
  options: AutoCompleteProps['options'];
  defaultOpen?: boolean;
  open?: boolean;
  defaultValue?: string;
  value?: string;
}

const HeaderSearch: React.FC<HeaderSearchProps> = (props) => {
  const {
    className,
    defaultValue,
    onVisibleChange,
    placeholder,
    defaultOpen,
  } = props;

  const inputRef = useRef<Input | null>(null);
  const [options, setOptions] = useState([]);
  const [searchValue, setSearchValue] = useState();

  const handleSearch = (value: string) => {
    if (value == undefined || value == '') {
      return;
    }
    getSpecialApiInfo(value).then(function (res: any) {
      if (res != undefined && res != '') {
        var optionsx: any = [];
        for (var index in res) {
          if (res[index] == undefined || res[index] == null) {
            continue;
          }
          var operationId = res[index]["operationId"];
          if (operationId == undefined || operationId == null) {
            continue;
          }
          var summary = res[index]["summary"];
          var method = res[index]["method"];
          var url = "/swagger/doc/markdown?key=" + operationId;
          var value = method + ":" + summary
          optionsx[index] = { key: operationId, summary: summary, method: method, url: url, value: value }
        }
        setOptions(optionsx);
      }
    });
  };

  const onSelect = (v: string, option: any) => {
    setSearchValue(option.summary);
    history.push(option.url);
  };
  const setValue = (v: any) => {
    setSearchValue(v);
  }

  const [searchMode, setSearchMode] = useMergeValue(defaultOpen || false, {
    value: props.open,
    onChange: onVisibleChange,
  });

  const inputClass = classNames(styles.input, {
    [styles.show]: searchMode,
  });

  return (
    <div
      className={classNames(className, styles.headerSearch)}
      onClick={() => {
        setSearchMode(true);
        if (searchMode && inputRef.current) {
          inputRef.current.focus();
        }
      }}
      onTransitionEnd={({ propertyName }) => {
        if (propertyName === 'width' && !searchMode) {
          if (onVisibleChange) {
            onVisibleChange(searchMode);
          }
        }
      }}
    >
      <SearchOutlined
        key="Icon"
        style={{
          cursor: 'pointer',
        }}
      />
      <AutoComplete
        key="AutoComplete"
        className={inputClass}
        value={searchValue}
        options={options}
        onSearch={handleSearch}
        onChange={setValue}
        onSelect={onSelect}
      >
        <Input
          size="small"
          ref={inputRef}
          defaultValue={defaultValue}
          aria-label={placeholder}
          placeholder={placeholder}
          onKeyDown={(e) => {
            if (e.key === 'Enter') {

            }
          }}
          onBlur={() => {
            setSearchMode(false);
          }}
        />
      </AutoComplete>
    </div>
  );
};

export default (HeaderSearch);
